<template>
    <div id="app">
      <h1>书籍管理系统</h1>
      <div>
        <div>      <input type="text" placeholder="请输入..." class="" v-model="keyWord" > 
          <input type="button" value="查找" @click="seekBtn">
          <input type="button" value="新增" @click="addBtn">
        </div>
        <table>
         <thead>
            <tr>
              <th>id</th>
              <th>书名</th>
              <th>作者</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.bookName }}</td>
              <td>{{ item.author }}</td>
              <td>
                <button class="updBtn"  @click="updBtn(item.id)">编辑</button>
                <button class="delBtn" @click="delBtn(item.id)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  
  </template>
  
  <script setup>

  import axios from 'axios';
  import { ref } from 'vue';
import { useRouter } from "vue-router";
let router=useRouter()
  const list = ref([]);
  const  keyWord=ref("")
  
  axios.get('http://localhost:5000/book').then(res => {
    // 获取数据
    console.log(res.data.data);
    list.value = res.data.data;
  });
  //删除
   const delBtn=function (id) {
    axios.delete(`http://localhost:5000/book/${id}`).then(
  ctx=>{
  if (confirm("是否删除？？？")) {
    let item=list.value.findIndex(item=>item.id===id)
    list.value.splice(item,1)
  } 
   })
  }
  // 查找
  const seekBtn=function () {
    console.log(keyWord.value);
  let res=  /^[\u4E00-\u9FA5A-Za-z0-9]+$/.test(keyWord.value)
  if (res) {
    axios.get(`http://localhost:5000/book?keyWord=${keyWord.value}`).then(ctx=>{
      list.value.splice(0)
  console.log(ctx.data.data);
  list.value=ctx.data.data
  
    }) 
  }

  
    // http://localhost:5000/book?keyWord=
   
  }
  // 新增
  const addBtn=function () {
router.push(`/add`)  }
// 跳转
const updBtn=function (id) {
        router.push(`/upd/${id}`)
    }
 </script>
  
  <style>
  .updBtn{
    background-color: blue;
    color: white;
    border-radius: 10px;
    
  }
  table{ 
  border: 1px black solid; 
  }
  .delBtn{background-color: blue;
    color: white;
    border-radius: 10px;margin-left: 4px;
  }
  #app {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    border-radius: 10px;
    background-color: brown;
  }
  </style>